<template>
	<view>
		<map style="width: 100%;height: 30vh;" layer-style='1' :show-location='true'
			:latitude="latitude" @regionchange="mapMove" :longitude="longitude" :markers="markers" :enable-scroll="true" :scale="scale" @markertap="markertap"
			@callouttap='callouttap'>
		</map>
		<img class="center-point" src="/static/icon/map_center.png" alt="">
		<uni-search-bar placeholder="请输入地址查询" bgColor="#EEEEEE" @blur="search" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 0, //纬度
				longitude: 0, //经度
				scale: 13, //缩放级别
				markers: [],
				bottomData: false,
				selectedAddress:{
					
				}
			}
		},
		created() {
			console.log(111)
			navigator.geolocation.getCurrentPosition((res) => {
				console.log(res)
				// this.latitude = res.coords.latitude
				// this.longitude = res.coords.longitude
				this.latitude = '39.91382633056693'
				this.longitude = '116.4520133972168'
				let marker = {
					id: 1,
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: "/static/icon/map_point.png",
					width: 20,
					height: 20
				}
				this.markers = [marker]
			})
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success(res) {
			// 		this.latitude = res.latitude
			// 		this.longitude = res.longitude
			// 		let marker = {
			// 			id: 1,
			// 			latitude: this.latitude,
			// 			longitude: this.longitude
			// 		}
			// 		this.markers = [marker]
			// 	}
			// })
		},
		computed: {
			// mapheight() {
			// 	let data = ''
			// 	if (this.bottomData) {
			// 		if (this.upTop) {
			// 			data = '50px'
			// 		} else {
			// 			data = '200px'
			// 		}
			// 	} else {
			// 		data = '30vh'
			// 	}
			// 	return data
			// },
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '100rpx'
				}
				return data
			}
		},
		methods: {
			mapMove(info) {
				console.log(info)
			},
			search() {
				console.log(222)
			},
			markertap(e) {
				console.log("===你点击了标记点===", e)
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(res)
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.search-address-input{
		margin-top: 20rpx;
		border: 1px solid #ccc;
	}
	.center-point{
		position: fixed;
		top: calc(15vh + 44rpx);
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>